<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link type="text/css" rel="stylesheet" href="xiumu-flex.css" />
		<title>前端Demo</title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			.item1{
				width: 100px;
				background-color: lightblue;
				height: 100px;
				display: flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
			}
			.item2{
				width: 100px;
				background-color: lightcoral;
				height: 100px;
				display: flex;
				justify-content: center;
				flex-direction: row;
				align-items: center;
			}
			.bg-black{
				background-color: black;
				height: 300px;
			}
			.wid-100{
				width: 100%;
			}
			.text-q{
				color: red;
				margin-left: 3em;
			}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="item1">
				<h1>1</h1>
			</div>
			<div class="item2">
				<h1>2</h1>
			</div>
			<em style="margin-left: 2em;">这是用来练习的两个基本方块: 1号、2号，以下练习题都是以这两个方块来演示</em>
		</div>
		<div class="container">
			<h1>flex布局演示，以及通用的flex封装css</h1>
		</div>
		<!-- 第1题 -->
		<div>
			<p class="text-q">1.将以下三个1号方块，在黑底容器内横向排列</p>
			<div class="bg-black wid-100">
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item1">
					<h1>1</h1>
				</div>
			</div>
		</div>
		
		<!-- 第2题 -->
		<div>
			<p class="text-q">2.将以下三个1号方块，在黑底容器内横向排列，并居中</p>
			<div class="bg-black wid-100">
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item1">
					<h1>1</h1>
				</div>
			</div>
		</div>
		
		<!-- 第3题 -->
		<div>
			<p class="text-q">3.将以下三个1号方块，在黑底容器内横向排列，且每个方块所占的宽度一样</p>
			<div class="bg-black wid-100">
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item1">
					<h1>1</h1>
				</div>
			</div>
		</div>
		
		<!-- 第4题 -->
		<div>
			<p class="text-q">4.将以下2个方块，在黑底容器内横向排列，且2号方块所占的宽度与1号宽度之比为1:2</p>
			<div class="bg-black wid-100">
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item2">
					<h1>2</h1>
				</div>
			</div>
		</div>
		
		<!-- 第5题 -->
		<div>
			<p class="text-q">5.将以下2个方块，在黑底容器内横向排列，且2号方块所占的宽度与1号宽度之比为1:3</p>
			<div class="bg-black wid-100">
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item2">
					<h1>2</h1>
				</div>
			</div>
		</div>
		<!-- 第6题 -->
		<div>
			<p class="text-q">6.将以下2个方块，在黑底容器内纵向排列，且居中</p>
			<div class="bg-black wid-100">
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item2">
					<h1>2</h1>
				</div>
			</div>
		</div>
		<!-- 第7题 -->
		<div>
			<p class="text-q">7.将以下2个方块，在黑底容器内纵向排列，居中且两个方块所占有的高度相等</p>
			<div class="bg-black wid-100">
				<div class="item1">
					<h1>1</h1>
				</div>
				<div class="item2">
					<h1>2</h1>
				</div>
			</div>
		</div>
		<br />
		<br />
		<br />
		<br />
		<br />
	</body>
</html>
